<template>
    <div>
        <header>
            <a href="javascript:;" class="left">
                <i class="iconfont icon-up21" @click="jump"></i>
            </a>
            <p>商品信息</p>
            <a href="javascript:;" class="right">
                <i class="iconfont icon-kefu1"></i>
            </a>
        </header>
        <div class="container">
            <div v-if="!cartList.length">
                <div style="text-align: center;padding-top: 20px;">
                    <a href="javascript:;">
                        <img width="150" src="http://m.vnasi.com/statics/images/normal_cart.png">
                    </a>
                </div>
                <p style="font-size:22px;color: #999999;text-align: center;margin: 10px 0" @click="jump">亲！您的购物车空空如也！</p>
                <p style="font-size:18px;color: #999999;text-align: center;margin-top: 10px">
                    <!-- <span class="countdown">0</span>
                    秒后自动返回首页
                </p> -->
                <p style="text-align:center;height:40px;margin-top:15px">
                    <a id="ahref" href="#" style="padding: 0 20px;border:1px solid #ccc;height:40px;line-height:40px;display:inline-block;color:#000" to="/">去首页逛逛</a>
                </p>
            </div>
            <ul>
                <li v-for="(item,index) in cartList" :key="item.browse">
                    <img :src="item.cover" alt="">
                    <div class="shopcart">
                        <h3>{{item.goods_name}}</h3>
                        <div class="price">¥<span>{{item.sell_price}}</span></div>
                        <div class="anniu">
                            <!-- <van-stepper min="1" max="6" button-size="25px" input-width="70px"/> -->
                            <div>
                                <span 
                                    :class="item.num<=1?'down-disabled':''"
                                    @click="handleNum(index,false)"
                                >-</span>
                                <input :value="item.num">
                                <span 
                                    :class="item.num>=6?'up-disabled':''"
                                    @click="handleNum(index,true)"
                                >+</span>
                            </div>
                            <a class="del iconfont icon-shanchu" @click="handleDel(index)"></a>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="shop-cart-total" id="payment" v-if="cartList.length">
                已选购
                <b id="total">{{allInfo.allNum}}</b>
                件，合计(不含运费)：
                <b>¥
                    <span id="total_amount">{{allInfo.allPrice}}.00元</span>
                </b>
            </div>
        </div>
        <footer>
            <ul>
                <li>
                    <a class="goshop" href="javascript:;" @click="jump">继续购物</a>
                </li>
                <li class="bg">
                    <a class="goclose" href="javascript:;" @click="handlejs">去结算</a>
                </li>
            </ul>
        </footer>
    </div>
</template>

<script>

import Vue from 'vue';
import { Stepper } from 'vant';
import {Toast} from 'vant'
Vue.use(Stepper);

export default {
    data() {
        return {
            isshow: false,
        }
    },
    methods: {
        jump() {
            this.$router.push('/')
            // console.log(111);
        },
        handleNum(idx,boll){  //数量控制
            this.$store.commit('detail/cartNumMut',{idx,boll})
        },
        handleDel(idx){
            this.$store.commit('detail/cartDelMut',idx)
            Toast('删除成功')
        },
        handlejs(cartList){
            this.$router.push({path:'/checkout',query:{cartList}})
        }
    },
    computed: {
        cartList() {
            return this.$store.state.detail.cartList
        },
        allInfo(){
            return this.$store.getters['detail/allInfo']
        }
    },
}
</script>

<style src="../assets/font/iconfont.css" scoped></style>
<style lang="less" scoped>
    header{
    width: 375px;
    height:50px;
    background-color: #00bf9d;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}
header .left{
    width: 30px;
    height: 33px;
    line-height: 33px;
    padding-left: 10px; 
}
header .left .iconfont{
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    margin: 0 0 0 10px !important;
}
header p{
    width: 260px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 22px;
    color: #fff;
    margin: 0 10px;
}
header .right{
    width: 40px;
    height: 40px;
    font-size: 26px;
    text-align: left;
    line-height: 40px;
    margin-right: 10px;
    /* float: left; */
}
header .right .iconfont{
    font-size: 35px;
    color: #fff;
    margin: 0 10px 0 0 !important;
}
    .container{
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 50px;
        overflow-x: hidden;
        overflow-y: scroll;
        margin: auto;
        background: #f5f5f5;
    }
    .container li{
        padding: 10px;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
        background: #fff;
    }
    .container li img{
        width: 100px;
        height: 100px;
    }
    .container .shopcart {
        width: 74%;
        float: left;
        padding-left: 3%;
        line-height: 30px;
    }
    .container .shopcart h3{
        color: #333;
    }
    .container .shopcart .price{
        color: #f60;
    }
    .anniu{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #999;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
        }
        .down-disabled{
            cursor:no-drop;
            color: #ddd;
        }
        .up-disabled{
            cursor: not-allowed;
            color: #ddd;
        }
        input{
            margin: 0 10px;
            height: 22px;
            line-height: 19px;
            width: 40px;
            text-align: center;
            background: rgb(228, 222, 222);
            border: none;
            color: rgb(107, 105, 105);
        }
    }
    .anniu .del{
        // position: absolute;
        // right: 0;
        // top: 0;
        color: #666;
        font-size: 22px;
    }
    .shop-cart-total {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px;
        margin: 10px 0;
        background-color: #fff;
        color: #999;
    }
    .shop-cart-total b {
        color: #f60;
        margin: 0 5px;
    }
    footer{
        background-color: #fff;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        border-top: 1px solid #eee;
    }
    footer ul{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
    }
    footer ul li{
        width: 50%;
        height: 100%;
        line-height: 50px;
        color: #000;
    }
    footer ul li .goshop{
        text-align: center;
        display: block;
        width: 100%;
        height: 100%;
        color: #000;
    }
    footer ul .bg{
        background-color: #f60;
        color: #fff;
    }
    footer ul li .goclose{
        text-align: center;
        display: block;
        width: 100%;
        height: 100%;
        color: #fff;
    }
</style>